<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 17:16:21
 * @LastEditors: LAPTOP-CC091CC3
 * @LastEditTime: 2021-08-06 15:33:59
-->
<template>
   <div class="home">
    <!-- 头部 -->
    <Head></Head>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="wrapper">
      <div class="carousel">
        <el-carousel height="450px" width="100%">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
        </div>
         <div class="carousel-a" >
             <div class="aa">
          <a href="https://news.cctv.com/2021/08/05/ARTINnesYAY9BkPvY9nPmTNV210805.shtml?spm=C94212.PnPr887gR6ub.EBlqp4fM1QR0.4"><h1><b>警惕电子烟流向未成年人</b></h1><br><br></a>
          <hr style="margin-right:50px"  color=black SIZE=1><br><br>
          <a href="https://news.cctv.com/2021/08/05/ARTINnesYAY9BkPvY9nPmTNV210805.shtml?spm=C94212.PnPr887gR6ub.EBlqp4fM1QR0.5">记者近期调查发现，虽然国家已明文规定各类市场主体<br><br>不得向未成年人出售电子烟，但部分裹着“绚烂外衣”的<br><br>电子烟依旧在向未成年人群体渗透，一些潜藏的风险也<br><br>值得警惕。</a>
             </div>
             <div class="share">
                <a href="javascript:;" class="weixin" data-fx="wx-btn1" title="微信" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.6"><img src="../assets/微信.png"></a> 
                <a href="javascript:;" class="weibo" data-fx="wb-btn" title="新浪微博" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.7"><img src="../assets/新浪微博.png"></a>
                <a href="javascript:;" class="qqzone" data-fx="qz-btn" title="QQ空间" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.8"><img src="../assets/QQ空间.png"></a>
                <a href="javascript:;" class="qq" data-fx="qq-btn" title="QQ" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.9"><img src="../assets/QQ.png"></a>
             </div>
      </div>
     </div>
      <!--/轮播图 -->
      <!--标签-->
      <div class="top" data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.i0">
				<div class="btn">
          <div class="btn-a">
					<span class="btn_left cur">
            <i></i>
            <a href="javascript:;" data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.1"><img src="../assets/列表浏览.png">列表浏览</a></span>
					<span class="btn_right" data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.i1">
            <i>/&nbsp;</i>
            <a href="javascript:;" data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.2"><img src="../assets/卡片浏览.png">卡片浏览</a></span>
				</div>
        </div>
				<div class="data" id="weather">
          <div class="data-a">
          <span class="time">2021年08月06日&nbsp;&nbsp;</span>
        <span class="location"><i></i>南京&nbsp;&nbsp;</span><span class="weather">多云 33℃/26℃&nbsp;&nbsp;</span>
        <span class="weather_search"><a href="http://weather.cntv.cn/" target="_blank" data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.3">天气查询&gt;</a></span>
        </div>
        </div>
      </div>
      <!-- <div class="wrapper">
          
      </div> -->
      <!-- 板块 -->
      <div class="wrapper" style="min-height:400px" v-loading="loading">
        <div class="plates">
          <div class="plate" v-for="cas in categoryArticles" :key="cas.category.id">
            <div class="head">
              <div class="title">{{cas.category.name}}</div>
              <div class="more" @click="toListHandler(cas.category)">更多&gt;&gt;</div>
             
            </div>

            <div v-for="a in cas.aritcle" @click="toArticleHandler(a)" :key="a.id">

                  <img :src="a.cover" width="99.5%" height="243px"><br>
                <!-- <a href="javascript:;" class="weixin" data-fx="wx-btn1" title="微信" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.6"><img src="../assets/微信.png"></a> 
                <a href="javascript:;" class="weibo" data-fx="wb-btn" title="新浪微博" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.7"><img src="../assets/新浪微博.png"></a>
                <a href="javascript:;" class="qqzone" data-fx="qz-btn" title="QQ空间" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.8"><img src="../assets/QQ空间.png"></a>
                <a href="javascript:;" class="qq" data-fx="qq-btn" title="QQ" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.9"><img src="../assets/QQ.png"></a> -->

                  <!-- {{a.cover}} -->


            </div>
             <a class="share-a">
                <a href="javascript:;" class="weixin" data-fx="wx-btn1" title="微信" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.6"><img src="../assets/微信.png"></a> 
                <a href="javascript:;" class="weibo" data-fx="wb-btn" title="新浪微博" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.7"><img src="../assets/新浪微博.png"></a>
                <a href="javascript:;" class="qqzone" data-fx="qz-btn" title="QQ空间" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.8"><img src="../assets/QQ空间.png"></a>
                <a href="javascript:;" class="qq" data-fx="qq-btn" title="QQ" data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.9"><img src="../assets/QQ.png"></a>
             </a>
            <!-- <ul class="list">
              <li v-for="a in cas.aritcle" @click="toArticleHandler(a)" :key="a.id">
                  <img src="a.cover">
                  </li>
            </ul> -->
          </div>
        </div>
      </div>
      <!-- /板块 -->
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Foot></Foot>
    <!-- /底部 -->
  </div>

</template>
<script>

import {get} from '../utils/request';
import Head from './components/Head';
import Foot from './components/Foot';
export default {
  // 4. 局部组件注册
  components:{
    Head,
    Foot
  },
  // 1. 数据
  data(){
    return {
      carousels:[],
      loading:false,
      categoryArticles:[]
    }
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created(){
    this.loadCarousels();
    this.loadCategoryArticles();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods:{
    // 跳转
    toListHandler(category){
      // 跳转
      this.$router.push({
        path:'/list',
        query:category
      })
    },
    toArticleHandler(article){
      this.$router.push({
        path:'/article',
        query:{
          id:article.id,
          name:article.category?article.category.name:''
        }
      })
    },
    // 加载轮播图数据
    loadCarousels(){
      let url = '/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
      })
    },
    // 加载板块数据
    loadCategoryArticles(){
      this.loading = true;
      let url = "/index/article/findCategoryArticles"
      get(url).then( resp => {
        this.categoryArticles = resp.data;
        this.loading = false;
      }),
      function() {
  var href = $(".xinwen18886_ind01 .list_con .silde").eq(index).attr("dataurl");
  var title = $(".xinwen18886_ind01 .list_con .silde").eq(index).find(".right_text h3 a").text();
  var brief = $(".xinwen18886_ind01 .list_con .silde").eq(index).find(".right_text p a").text();
  var shaimg = $(".xinwen18886_ind01 .list_con .silde").eq(index).find(".image img").attr("src");
  if (href == undefined) {
    href = "http://news.cctv.com/"
  }
  shareObj.shareUrl = href;
  shareObj.shareTitle = title;
  shareObj.pic = "https://" + shaimg.split("//")[1]
  shareObj.summary = brief;
  if ($(this).hasClass("weixin")) {
    if ($(this).parents(".share").find(".ind01cntvshare_weixin").length > 0) {
      $(".ind01cntvshare_weixin").remove()
    } else {
      requireQrcode2(index, href)
    }
  }

},
function() {
  var u = "//service.weibo.com/share/share.php?appkey=2078561600&title=" + shareObj.shareTitle + "&url=" + encodeURIComponent(shareObj.shareUrl) + "&pic=" + shareObj.pic + "&searchPic=false&style=simple";
  window.open(u)
},
function() {
  if (!shareObj.desc || typeof shareObj.desc == "undefined") {
    shareObj.desc = "";
  }
  var u = "//sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + encodeURIComponent(shareObj.shareUrl) + "&summary=" + shareObj.summary + "&title=" + encodeURIComponent(shareObj.shareTitle) + "&pics=" + shareObj.pic + "&desc=" + shareObj.desc;
  window.open(u)
},
function() {
  if (!shareObj.desc || typeof shareObj.desc == "undefined") {
    shareObj.desc = "";
  }
  var u = "//connect.qq.com/widget/shareqq/index.html?url=" + encodeURIComponent(shareObj.shareUrl) + "&summary=" + shareObj.summary + "&title=" + encodeURIComponent(shareObj.shareTitle) + "&pics=" + shareObj.pic + "&desc=" + shareObj.desc;
  window.open(u)
},
function() {
  if ($(this).hasClass("cur")) {

  } else {
    $(this).addClass("cur").siblings().removeClass("cur")
    if ($(this).hasClass("btn_right")) {
      $(".xinwen18886_ind04 .con").addClass("kapian");
    } else {
      $(".xinwen18886_ind04 .con").removeClass("kapian");
    }
  }
},
function() {
  if ($(this).hasClass("cur")) {

  } else {
    $(this).addClass("cur").siblings().removeClass("cur")
    if ($(this).hasClass("btn_right")) {
      $(".xinwen18886_ind04 .con").addClass("kapian");
    } else {
      $(".xinwen18886_ind04 .con").removeClass("kapian");
    }
  }
}
    }
  }
}
</script>
<style lang="scss" scoped>

// 变量
$color_primary:#f6f9fb;
  // 内容样式
  .content {
    margin-top: 50px;
    background-color: $color_primary;
  }
    .swapper{
     height: 450px;
     width: 100%;
    }
    .carousel {
        float: left;
        width: 68%;
        
   
      .img {
        width:100%;
        height: 100%;
      } 
      }
      img:hover{
          cursor: pointer;
      }
      .carousel-a{
          margin-left: 68%;
          height: 420px;
          padding-top: 30px;
          background-color: rgb(208, 224, 238);
          a:hover{
             color: rgb(140, 54, 20);
          }
          .aa{
              margin-left: 50px;
              
          .a{
              
              text-justify: inter-ideograph;
              font-weight: bold;
              
          }
      } 
      .share{
          
          margin-top: 55px;
         display: flex;
          justify-content: space-around;
          img{
              height: 30px;
              width: 30px;
          }
          
      }
      }
      .share-a{
          margin-top: 6px;
         display: flex;
          justify-content: space-around;
          img{
              height: 15px;
              width: 15px;
          }
          
      }
   .top{
       display:flex;
      justify-content:space-around;
       height:60px;
       width: 100%;
       .btn{
         height: 100%;
         margin-top:28px;
.btn-a{
  height:100%;
  width: 400px;
 .btn_left{
   font-size: 25px;
    background-color:white;
    img{
      height:22px ;
      width: 22px;
    }
    
  }
  .btn_left:hover a{
    color: red; 
  }
  .btn_right:hover a{
      color:red
    }
  .btn_right{
    font-size: 25px;
    background-color: white;
     img{
      height:18px ;
      width: 22px;
    }
    
  }
}
       }
.data{
   height:100%;
   margin-top:42px;
.data-a{
 height:100%;
 .time{
font-size: 15px;
    
 }
 .location{
font-size: 15px;
 }
 .weather{
   font-size: 15px;
    
 }
.weather_search{
  font-size: 15px;  
 
}
.weather_search:hover a{
  color:red;
}
}
}

}
    .plates::after {
      content:"";
      display: block;
      clear: both;
    }
    .plates {
      padding:.5em 0;
      .plate {
        box-sizing: border-box;
        float: left;
        width: 32.5%;
        height: 300px;
        background-color: rgb(207, 223, 228);
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
      }
        .head {
          display: flex;
          justify-content: space-between;
        }
        //   .cover {
        //     width: 100%;
        //     h
        //   }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        ul.list {
          li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
          }
          li:hover {
            color: $color_primary;
          }
        }

      .plate:nth-child(3n){
        margin-right: 0;
      }
    
 
    }
</style>

